<style scoped>
    .site-banner {
        width: 100vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .banner-container {
        padding-bottom: 30px;
    }

    img {
        width: 100vw;
        /* height: 35vw; */
    }

    @media screen and (max-width: 780px) {
        .banner-container {
            display: none;
        }
    }
</style>
<template>
    <div class="site-banner">
        <div class="banner-container">
            <Carousel autoplay loop :autoplay-speed="autoplaySpeed" trigger="hover">
                <CarouselItem>
                    <div class="carousel">
                        <a href="https://www.mi.com/buy/detail?product_id=10000214" target="_blank">
                            <img src="static/img/banner/banner-9.webp" alt="banner" class="banner-img">
                        </a>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <a href="https://www.mi.com/buy/detail?product_id=10000223" target="_blank">
                            <img src="static/img/banner/banner-10.jpg" alt="banner" class="banner-img">
                        </a>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <a href="https://www.mi.com/a/h/9819.html" target="_blank">
                            <img src="static/img/banner/banner-11.webp" alt="banner" class="banner-img">
                        </a>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <a href="https://www.mi.com/a/h/15493.html" target="_blank">
                            <img src="static/img/banner/banner-12.webp" alt="banner" class="banner-img">
                        </a>
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                autoplaySpeed: 5000,
            }
        }
    };
</script>
